<template>
	<view>
		<view class="prefer-posi">
			<!-- 筛选区 -->
			<view class="delica-view">
				<view class="delica-list delica-grow" @click="getMore">
					<text>{{ one }}</text>
					<image src="../../../static/coen/paixu.png" mode="widthFix"></image>
				</view>
				<view class="delica-grow" @click="getnone">销量高</view>
				<view class="delica-grow" @click="getnone">速度快</view>
				<view class="delica-grow" @click="getnone">津贴联盟</view>
				<view class="delica-list delica-right" @click="getsx">
					<text>筛选</text>
					<image src="../../../static/coen/shaixuan.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 综合排序筛选 -->
			<view class="sortlist sortliteltle" v-if="flag">
				<block v-for="(item, index) in sortlist" :key="index">
					<text @click="bgcsortlist(item.name, index, item.screen, item.nums)" :class="{ activeb: index == num }">{{ item.name }}</text>
				</block>
			</view>
			<!-- 多个筛选区 -->
			<view class="sortlist sortlist-view" v-if="flagb">
				<!-- 多选：商家特色 -->
				<block v-for="(item, index) in screendata" :key="index">
					<view>
						<view class="sortlist-title">{{ item.title }}</view>
						<view class="sortlist-flex">
							<block v-for="(itemdata, indexs) in item.datas" :key="indexs">
								<text class="Choice" :class="{ scractive: itemdata.id === 2 }" @click="getYellow(indexs, itemdata.sign)">{{ itemdata.name }}</text>
							</block>
						</view>
					</view>
				</block>
				<!-- 单选：人均价 -->
				<block v-for="(item, index) in person" :key="index">
					<view>
						<view class="sortlist-title">{{ item.title }}</view>
						<view class="sortlist-flex">
							<block v-for="(itemdata, indexs) in item.datas" :key="indexs">
								<text class="Choice" :class="{ scractive: indexs == scrnum }" @click="getYellows(indexs, itemdata.per)">{{ itemdata.name }}</text>
							</block>
						</view>
					</view>
				</block>
				<!-- 置顶 -->
				<view class="sortlist-bottom">
					<text @click="empty">清空</text>
					<text @click="complete">完成</text>
				</view>
			</view>
		</view>
		<!-- 透明背景 -->
		<view class="yin" v-if="ying" @click="getWhite"></view>
	</view>
</template>

<script>
// 导入封装的请求方法
import { publicing } from '../../../api/api.js';

// 导入请求地址
import { startingurl, multipleurl } from '../../../api/request.js';

export default {
	data() {
		return {
			flag: false,
			flagb: false,
			one: '综合排序',
			ying: false,
			num: 0,
			scrnum: -1,
			chooseArr: {},
			sortlist: [
				{
					name: '综合排序',
					screen: '_id',
					nums: 1
				},
				{
					name: '起送价最低',
					screen: 'delivering',
					nums: 1
				},
				{
					name: '配送费最低',
					screen: 'physical',
					nums: 1
				},
				{
					name: '人均高到低',
					screen: 'capita',
					nums: -1
				},
				{
					name: '人均低到高',
					screen: 'capita',
					nums: 1
				}
			],
			// 多选
			screendata: [
				{
					title: '商家特色(可多选)',
					datas: [
						{
							id: 1,
							sign: 'duration',
							name: '配送最快'
						},
						{
							id: 1,
							sign: 'deliver',
							name: '0元起送'
						},
						{
							id: 1,
							sign: 'physi',
							name: '免配送费'
						}
					]
				}
			],
			// 人均价筛选
			person: [
				{
					title: '人均价',
					datas: [
						{
							name: '20元以下',
							per: {
								$lt: 20
							}
						},
						{
							name: '20-40元',
							per: {
								$lte: 40,
								$gte: 20
							}
						},
						{
							name: '40元以上',
							per: {
								$gt: 40
							}
						}
					]
				}
			]
		};
	},
	methods: {
		// 点击弹出综合排序下拉菜单
		getMore() {
			this.flag = !this.flag;
			this.getBlack();
			this.flagb = false;
		},
		// 点击改变下拉菜单文字样式
		bgcsortlist(name, index, screen, nums) {
			this.one = name;
			this.num = index;
			this.getWhite();
			this.flag = false;
			this.getShopPost(screen, nums);
		},
		// 点击排序显示发送POST请求，渲染页面
		getShopPost(screen, nums) {
			let Data = {
				screen,
				nums
			};
			publicing(startingurl, Data)
				.then(res => {
					console.log(res);
					this.$store.commit('getscreen', res.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 点击出现透明层
		getBlack() {
			this.ying = true;
		},
		getWhite() {
			this.ying = false;
			this.flag = false;
			this.flagb = false;
		},
		// 点击取消透明层、综合排序弹出框、筛选栏
		getnone() {
			this.ying = false;
			this.flag = false;
			this.flagb = false;
		},
		// 点击弹出筛选栏
		getsx() {
			this.getBlack();
			this.flagb = true;
			this.flag = false;
		},
		// 商家特色（可多选）
		getYellow(indexs, sign) {
			if (this.screendata[0].datas[indexs].id == 1) {
				// 选中
				this.screendata[0].datas[indexs].id = 2;
				// console.log(sign)
				this.$set(this.chooseArr, sign, sign);
				console.log(this.chooseArr);
			} else {
				// 未选中
				this.screendata[0].datas[indexs].id = 1;
				this.$delete(this.chooseArr, sign);
				console.log(this.chooseArr);
			}
		},
		// 人均价
		getYellows(indexs, per) {
			if (this.scrnum == indexs) {
				// 未选中
				this.scrnum = -1;
				this.$delete(this.chooseArr, 'capita');
				console.log(this.chooseArr);
			} else {
				// 选中
				this.scrnum = indexs;
				this.$set(this.chooseArr, 'capita', per);
				console.log(this.chooseArr);
			}
		},
		// 清空
		empty() {
			this.scrnum = -1;
			let newarr = this.screendata[0].datas;
			newarr.forEach(item => {
				item.id = 1;
			});

			// 取消透明层、综合排序弹出框、筛选栏
			// this.getnone()
		},
		// 完成
		complete() {
			publicing(multipleurl, this.chooseArr)
				.then(res => {
					console.log(res);
					// 存储到vuex数据仓库
					this.$store.commit('getscreen', res.data);
				})
				.catch(err => {
					console.log(err);
				});

			// 取消透明层、综合排序弹出框、筛选栏
			this.getnone();
		}
	}
};
</script>

<style scoped>
/* 筛选区 */
.delica-view image {
	width: 30upx;
	height: 30upx;
	display: block;
}
.delica-view {
	font-size: 30upx;
	display: flex;
	align-items: center;
	color: #666666;
	height: 70upx;
	padding: 0 15upx;
	background: #ffffff;
}
.delica-list {
	display: flex;
	align-items: center;
}
.delica-right {
	justify-content: flex-end;
	flex-grow: 5;
}
.delica-grow {
	flex-grow: 1;
}
.prefer-posi {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9999;
}
/* 排序 */
.sortlist {
	background: #ffffff;
}
.sortliteltle text {
	padding: 0 15upx;
	display: block;
	font-size: 30upx;
	height: 70upx;
	line-height: 70upx;
	border-top: 1rpx solid #ededed;
}
.activeb {
	color: #f89903 !important;
}
/* 选择 */
/*相对定位*/
.sortlist-view {
	height: 700upx;
	overflow: hidden;
	overflow-y: scroll;
	position: relative;
}
.sortlist-title {
	padding: 0 15upx;
	font-size: 30upx;
	height: 60upx;
	line-height: 60upx;
}
.Choice {
	font-size: 28upx;
	background: #f8f8f8;
	height: 55upx;
	line-height: 55upx;
	color: #666666;
	width: calc((100% / 3) - 15px) !important;
	margin: 7.5px;
	text-align: center;
	display: block;
	border-radius: 5upx;
}
.sortlist-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 30upx;
}
.sortlist-bottom {
	background: #ffffff;
	height: 80upx;
	border-top: 1upx solid #e4e4e4;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.sortlist-bottom text {
	flex-grow: 1;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
}
.sortlist-bottom text:nth-child(1) {
	border-right: 1upx solid #e4e4e4;
}
.sortlist-bottom text:nth-child(2) {
	background: #ffd348;
}
.yin {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/* 商家特色加样式 */
.scractive {
	background: #fef6df !important;
	color: #f29909 !important;
}
</style>
